import { size, formItemLayout, getUploadResult, getToken, uploadUrl, getImages, getFileList } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
import LzEditor from 'react-lz-editor';
import Uploads from '../Uploads';
export interface ArticlesEditProps extends FormComponentProps {
    visible: boolean,
    article?: api.SingleUserMallArticleVOArticlesVO,
    onSave: (any) => void,
    onCancel: () => void,

}
class ArticlesEdit extends React.PureComponent<ArticlesEditProps, any>{
    constructor(props) {
        super(props);
    }

    state = {
        responseList: [],
        content: '',
        fileList: [],
        pictures: [],
    }
    componentDidMount() {
        const images = this.props.article && this.props.article.picture;
        const pictures = this.props.article && this.props.article.picture;
        this.setState({ fileList: getFileList(images), pictures: getFileList(pictures) });
    }

    ok = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                form['content'] = this.state.content;
                form['picture'] = getImages(this.state.fileList);
                form['picture'] = getImages(this.state.pictures);
                this.props.onSave(form);
            }
        });
    }
    pictureChange = (pictures) => {
        this.setState({ pictures });
    }
    onChange = (info) => {
        let currFileList = info.fileList;
        currFileList = currFileList.filter((f) => (!f.length));
        if (!!currFileList && currFileList.length != 0) {
            this.setState({ responseList: currFileList });
        }
        //读取远程路径并显示链接
        currFileList = currFileList.map((file) => {
            if (file.response) {
                getUploadResult(file.response, (image) => {
                    file.url = image;
                });
            }
            if (!file.length) {
                return file;
            }
        });
    }
    receiveHtml = (content) => {
        //清空responseList
        this.setState({ responseList: [], content });
    }
    beforeUpload(file) {
        console.log("beforeUpload like", file);
    }

    cancel = () => {
        this.props.onCancel();
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { article } = this.props;
        const uploadProps = {
            name: 'file',
            action: uploadUrl,
            headers: getToken(),
            onChange: this.onChange,
            listType: 'picture',
            fileList: this.state.responseList,
            data: (file) => {

            },
            multiple: true,
            beforeUpload: this.beforeUpload,
            showUploadList: true
        }
        const visible = this.props;
        return (
            <Modal
                width={1000}
                title='文章信息'
                visible={this.props.visible}
                onOk={this.ok}
                onCancel={this.cancel}
                maskClosable={true}
            >
                <Form>
                    <Form.Item label="文章标题" {...formItemLayout} style={{ right: 20 }} >
                        {getFieldDecorator('title', {
                            rules: [{
                                required: true,
                                message: '请输入文章标题'
                            }],
                            initialValue: article && article.title
                        })(<Input size={size}
                            placeholder="请输入文章标题" />)}
                    </Form.Item>
                    <Form.Item label="图片" {...formItemLayout} style={{ right: 20 }}>
                        {getFieldDecorator('picture', {

                            initialValue: article && article.picture
                        })(
                            < Uploads editable={true} fileList={this.state.pictures} onChange={this.pictureChange} />)}
                    </Form.Item>
                    <Form.Item label="文章类型" {...formItemLayout} style={{ right: 20 }}>
                        {getFieldDecorator('articleType', {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择'
                                }
                            ],
                            initialValue: article && article.articleType ? article.articleType : 1
                        })(<Select style={{ width: 200 }}
                            placeholder="请选择"
                        >
                            <Select.Option value={1}>平台咨询</Select.Option>
                            <Select.Option value={2}>帮助中心</Select.Option>
                            <Select.Option value={3}>关于我们</Select.Option>
                            <Select.Option value={4}>砍价玩法</Select.Option>
                            <Select.Option value={5}>团购玩法</Select.Option>
                            <Select.Option value={6}>隐私政策</Select.Option>
                            <Select.Option value={7}>种树服务协议</Select.Option>
                            <Select.Option value={8}>种树用户协议</Select.Option>
                            <Select.Option value={9}>分红收益规则</Select.Option>
                            <Select.Option value={10}>分享收益规则</Select.Option>
                            <Select.Option value={11}>全民收益规则</Select.Option>
                            <Select.Option value={12}>活动规则</Select.Option>
                        </Select>)}
                    </Form.Item>

                    <Form.Item label="文章内容" {...formItemLayout} style={{right: 40 }} >
                        {
                            visible ? (
                                <LzEditor active={true}
                                    importContent={article && article.content}
                                    cbReceiver={this.receiveHtml}
                                    uploadProps={uploadProps}
                                />
                            ) : (undefined)
                        }
                    </Form.Item>
                </Form>
            </Modal>)
    }
}

export default Form.create()(ArticlesEdit);
